<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</a></el-breadcrumb-item>
		  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区 -->
		<el-card>
			<!-- 头部搜索框按钮 -->
			<el-row :gutter="20">
				<el-col :span="8">
					  <el-input placeholder="请输入内容" clearable @clear="userClear" v-model="queryInfo.query" class="input-with-select">
					    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
					  </el-input>
				</el-col>
				<el-col :span="4">
					  <el-button type="primary" @click='goAddPage'>添加商品</el-button>
				</el-col>
			</el-row>
			<!-- 表格视图 -->
			<el-table 
			:data="goodsList" 
			border style="margin-top: 15px;" 
			:header-cell-style="{textAlign: 'center'}"  
			:cell-style="{ textAlign: 'center' }"
			>
				<el-table-column label="#" type="index" ></el-table-column>
				<el-table-column  label="商品名称" prop="goods_name"  ></el-table-column>
				<el-table-column label="商品价格(元)" prop="goods_price" width="120"></el-table-column>
				<el-table-column label="商品重量" prop="goods_number" width="120"></el-table-column>
				<el-table-column label="创建时间" prop="add_time" width="200">
					<template slot-scope="scope">
						{{scope.row.add_time | dateFormat}}
					</template>
				</el-table-column>
					<el-table-column label="操作" width="160">
						<template slot-scope="scope">
								<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeById(scope.row)"></el-button>
						</template>
					</el-table-column>
			</el-table>
			<!-- 分页视图区域 -->
			 <el-pagination
			 style="display: flex;justify-content: center;"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="queryInfo.pagenum"
			      :page-sizes="[ 5, 10, 20]"
			      :page-size="queryInfo.pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				goodsList:[],		//页面列表数据
				queryInfo:{			//获取用户列表参数对象
					query:'',		//搜索框内容
					pagenum:1,		//页数
					pagesize:10		//每页显示条数
				},
				total:0,			//获取数据总条数			
			}
		},
		methods:{
			handleSizeChange(newSize){		//监听的切换当前页面显示多少条
				this.queryInfo.pagesize = newSize
				this.getGoodsList()
			},
			handleCurrentChange(newPage){		//监听页码值发生变化
				this.queryInfo.pagenum = newPage
				this.getGoodsList()
			},
			getGoodsList(){			//获取商品列表数据
				this.$axios.get('goods',{params:this.queryInfo}).then(data => {
					console.log(data.data)
					this.goodsList	= data.data.data.goods
					this.total = data.data.data.total
				})
			},
			search(){		//点击搜索触发
				if(this.queryInfo.query != ''){
					this.getGoodsList()
				}
			},
			userClear(){			//搜索框清空重新渲染页面
				this.getGoodsList()
			},
			removeById(row){			//删除商品事件
				console.log(row.goods_id)
				this.$confirm('此操作将永久删除该分类, 是否继续?', '提示',{
					confirmButtonText: '确定', cancelButtonText: '取消',type: 'warning'
				        }).then(() => {
							this.$axios.delete('goods/'+row.goods_id).then(data => {
								console.log(data.data)
								this.getGoodsList()
							})
				          this.$message({type: 'success',message: '删除成功!'
				          });
				        }).catch(() => {
				          this.$message({type: 'info',message: '已取消删除'
				       });          
				   });
			},
			goAddPage(){
				this.$router.push('/goods/add')
			}
		},
		created(){
			this.getGoodsList()
		}
	}
</script>

<style lnag="scss" scoped>
	.el-card{
		margin-top: 15px;
	}
</style>
